<template>
    <div>关于页面-about</div>
    <Heading :level="1">titile - h1</Heading>
    <Heading :level="2">titile - h2</Heading>
    <Heading2>
        <slot name="footer" text="hahahahah"></slot>
        <template #footer>
            hahaha
        </template>
    </Heading2>
    <!-- <h2>titile - h2-2</h2>
    <Heading :level="3">titile - h3</Heading>
    <Heading :level="4">titile - h4</Heading>
    <Heading :level="5">titile - h5</Heading>
    <h5>titile - h5 -- 2</h5>
    <Heading :level="6">titile - h6</Heading>
    <h6>titile - h6 -- 2</h6> -->
    <ListTest v-model:list="val"></ListTest>
    <div>
        <a-button @click="handleAdd">操作1212</a-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ListTest from '../components/ListTest.vue'
import Heading from '../components/Heading.jsx'
import Heading2 from '../components/Heading2.jsx'
interface IUserInfo {
    name?: string
    age?: number
}
const val = ref<IUserInfo[]>()
val.value = [
    {
        name: 'zz',
        age: 18
    },
    {
        name: 'cc',
        age: 18
    },
    {
        name: 'jj',
        age: 18
    }
]
const handleAdd = () => {
    val.value?.splice(1, 1, {
        name: 'enen',
        age: 28
    })
}
</script>